<template>
    <article class="post-page">
        <div class="g-left">
            <menus></menus>
        </div>
        <div class="g-right">
            <div class="search-item">
                <!--<input class="adds" type="text" v-model="addlists" @keyup.enter="addList($event)" placeholder="添加任务...">-->
                <input class="adds" type="text" v-model="addlists" placeholder="添加任务..." ref="inputValue">
                <button @click="addList" class="add-btn">添加</button>
            </div>
            <todo-list class="todo" v-for="(todo, index) in undoneTodos" :todo="todo" :key="index">

            </todo-list>
            <div class="title" @click="isShowDone = !isShowDone">
                {{isShowDone ? '隐藏已完成任务' : '显示已完成任务'}}
                <span
                    class="subtitle">
                共{{doneTodos.length}}项
            </span>
            </div>
            <todo-list v-show="isShowDone" class="todo" v-for="(todo, index) in doneTodos" :todo="todo"
                       :key="index + 'done'">

            </todo-list>
        </div>
    </article>
</template>

<script>
    import TodoList from 'components/todo-list.vue';
    import Menus from 'components/common/menus.vue';

    import { mapGetters, mapState } from 'vuex'

    const COMPONENT_NAME = 'post-page';

    export default {
        name: COMPONENT_NAME,
        data() {
            return {
                addlists: '',
                isShowDone: false
            }
        },
        computed: {
            ...mapState([
                'todos',
                'curMenu'
            ]),
            ...mapGetters([
                'doneTodos',
                'undoneTodos'
            ])
        },
        beforeUpdate() {
            // window.console.log('todos', this.todos);
            // window.console.log('doneTodos', this.doneTodos);
            // window.console.log('undoneTodos', this.undoneTodos);
        },
        methods: {
            addList() {
                let value = this.$refs.inputValue.value;
                if (value) {
                    let text = this.addlists
                    let curMenu = this.curMenu.id
                    this.$store.dispatch('addTodo', {
                        text: text,
                        curMenu: curMenu,
                    })
                    this.addlists = '';
                } else {
                    this.$message.info('请填写任务名称!');
                }
            },
        },
        components: {
            TodoList,
            Menus,
        }
    }
</script>

<style lang="less">
    .post-page {
        width: 100%;
    }

    .adds {
        width: 300px;
        border: 1px solid #dedede;
        border-radius: 10px;
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        font-size: 20px;
    }

    .add-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        line-height: 50px;
        font-size: 16px;
        background: #00b7e5;
        border: none;
        color: #fff;
    }

    .todo {
        text-align: left;
    }

    .title {
        width: 300px;
        height: 32px;
        line-height: 32px;
        text-align: left;
        cursor: pointer;
        .subtitle {
            color: #999;
            font-size: 12px;
        }
    }
</style>
